<template>
  <div class="page-container" :class="{ 'is-full': isFull }">
    <div class="page-title">
      <dv-decoration-8 :color="[mainColor, mainColor]" :reverse="true" class="title-img" />
      <h1>海外数据统计</h1>
      <dv-decoration-8 :color="[mainColor, mainColor]" class="title-img" />
      <div class="top">
        <i class="el-icon el-icon-full-screen" @click="handleFullScreen"></i>
      </div>
    </div>
    <div class="page-content page-content1" v-if="showType === 'pie'">
      <div class="page-left">
        <div class="page-left-top">
          <dv-border-box-8 :color="[mainColorOpcity, mainColor]" :key="new Date().toString()">
            <panel1 title="回收数据" id="huishouEchart" :data="huishouData" ref="panel11" @click="handleClick('回收', $event)">
              <el-button class="chart-button" type="primary" size="mini" @click="handleToggle">切换为柱状图</el-button>
            </panel1>
          </dv-border-box-8>
        </div>
        <div class="page-left-bottom">
          <dv-border-box-8 :color="[mainColorOpcity, mainColor]" :key="new Date().toString()">
            <panel1 title="二手设备数据" id="ershouEchart" :data="ershouData" ref="panel12" @click="handleClick('二手设备', $event)"> </panel1>
          </dv-border-box-8>
        </div>
      </div>
      <div class="page-right">
        <dv-border-box-8 :color="[mainColorOpcity, mainColor]"><panel3 ref="panel3" @click="handleClick('不限', $event)"></panel3></dv-border-box-8>
      </div>
    </div>
    <div class="page-content page-content2" v-if="showType === 'bar'">
      <div class="page-left">
        <div class="page-left-top">
          <dv-border-box-8 :color="[mainColorOpcity, mainColor]" :key="new Date().toString()">
            <panel2 title="回收数据" id="huishouEchart" :data="huishouData" ref="panel11" @click="handleClick('回收', $event)">
              <el-button class="chart-button" type="primary" size="mini" @click="handleToggle">切换为饼图&地图</el-button>
            </panel2>
          </dv-border-box-8>
        </div>
        <div class="page-left-bottom">
          <dv-border-box-8 :color="[mainColorOpcity, mainColor]" :key="new Date().toString()">
            <panel2 title="二手设备数据" id="ershouEchart" :data="ershouData" ref="panel12" @click="handleClick('二手设备', $event)"> </panel2>
          </dv-border-box-8>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiHuishouCount } from '@/api/customer'
import panel1 from './components/panel1.vue'
import panel2 from './components/panel2.vue'
import panel3 from './components/panel3.vue'

export default {
  name: 'index',
  components: { panel1, panel2, panel3 },
  data() {
    return {
      updateTime: '',
      isFull: false,
      key: new Date().toLocaleTimeString(),
      mainColor: '#68cee0',
      mainColorOpcity: 'rgba(104, 206, 224, 0.3)',
      active: 0,
      ershouData: {},
      huishouData: {},
      showType: 'pie',
    }
  },
  mounted() {
    window.onresize = () => {
      // 可视区域的高度
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      // screen是window的属性方法，window.screen可省略window，指的是窗口
      this.isFull = screen.height == clientHeight
      this.$refs.panel11.onResize()
      this.$refs.panel12.onResize()
      this.$refs.panel3.onResize()
    }
    this.getPieData()
  },
  beforeDestroy() {},
  methods: {
    getPieData() {
      apiHuishouCount().then((res) => {
        this.ershouData = res.data.ershou_data
        this.huishouData = res.data.huishou_data
      })
    },
    handleToggle() {
      this.showType = this.showType == 'pie' ? 'bar' : 'pie'
    },
    // 刷新
    handleRefresh() {
      this.key = new Date().toLocaleTimeString()
    },
    // 全屏
    // 在全屏与非全屏之间来回切换
    handleFullScreen() {
      this.isFullScreen() ? this.exitFullScreen() : this.fullScreen()
    },
    /**实现F11全屏效果*/
    fullScreen() {
      if (this.isFullScreen()) return
      var docElm = document.documentElement
      /*W3C*/
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen()
      } /*FireFox */ else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen()
      } /*Chrome等 */ else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen()
      } /*IE11*/ else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen()
      }
      this.isFull = true
    },
    /**退出F11全屏*/
    exitFullScreen() {
      if (!this.isFullScreen()) return
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
      this.isFull = false
    },
    /**判断是否全屏*/
    isFullScreen() {
      return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement ? true : false
    },
    // 点击跳转
    handleClick(cate, param) {
      window.open(`${location.origin}/#/customer/foreignCustomer?cate1=${cate}&country=${param.name}`)
    },
  },
}
</script>

<style scoped lang="scss">
$bgColor: #060a22;
$mainColor: #68cee0;
$mainColorOpcity: rgba(104, 206, 224, 0.3);
.page-container {
  background: url(../../../assets/img/bg.png) no-repeat center / 100% 100%;
  color: $mainColor;
  &:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  &.is-full {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
  }
}
.panel {
  margin: 5px;
}
.page-title {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  h1 {
    flex: 0 0 auto;
    margin: 0 10px;
  }
  .title-img {
    width: 40vw;
    height: 50px;
  }
  .top {
    position: absolute;
    top: 0px;
    right: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    .el-icon {
      margin-left: 10px;
      font-size: 16px;
      cursor: pointer;
    }
  }
}

.page-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: calc(100% - 90px);
  display: flex;
  justify-content: center;
  align-items: center;
  .page-left {
    flex: 1 1 auto;
    width: 25vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .page-left-top {
      width: 100%;
      height: calc(50% - 5px);
      flex: 0 0 auto;
      margin-bottom: 10px;
    }
    .page-left-bottom {
      width: 100%;
      height: calc(50% - 5px);
      flex: 0 0 auto;
    }
  }
  .page-right {
    flex: 1 1 auto;
    width: 75vw;
    height: 100%;
  }

  &.page-content2 {
    .page-left {
      width: 100%;
    }
  }
}
.el-button--primary {
  background-color: #68cee030;
  border-color: #68cee0;
  color: #68cee0;
}
</style>
